﻿@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
	<style type="text/css">
		.sku-list tbody tr td {
			vertical-align: middle;
		}
	</style>
}

@model IEnumerable<dPet.Application.DataObjects.ServiceItemDto>

<div ng-controller="ServiceItemListController">
	<div class="page-header">
		<h3>服务项管理</h3>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">
			<a href="@Url.Action("ServiceItem", "Service")" class="btn btn-info btn-sm" title="添加服务项"><span class="glyphicon glyphicon-plus-sign"></span> 添加服务项</a>
		</div>
		<table class="table table-striped text-center">
			<thead>
				<tr>
					<th class="text-center">服务项名称</th>
					<th class="text-center">所属分类</th>
					<th class="text-center" width="250px">操作</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var item in Model)
				{
					<tr>
						<td>@item.Name</td>
						<td>@(item.Category != null ? item.Category.Name : "-")</td>
						<td>
							<a href="@Url.Action("ServiceItem", "Service", new { id = item.Id })">编辑</a>
							&nbsp;&nbsp;
							<a href="javascript:;" ng-click="showSKUPropertyList('@item.Id', '@item.Name')">SKU属性列表</a>
							&nbsp;&nbsp;
							<a href="javascript:;" ng-click="showSKUList('@item.Id', '@item.Name')">SKU配置</a>
						</td>
					</tr>
				}
			</tbody>
		</table>
	</div>
</div>

<script type="text/ng-template" id="serviceItemPropertyListModal">
	<div class="modal-header">
		<button type="button" class="close" ng-click="close();">&times;</button>
		<h4 class="modal-title">服务项 [ {{ mServiceItemName }} ] SKU列表 </h4>
	</div>
	<div class="modal-body">
		<div class="panel panel-default">
			<div class="panel-heading">已添加SKU属性</div>

			<table class="table table-striped text-center">
				<thead>
					<tr>
						<th class="text-center">前台名称</th>
						<th class="text-center">后台名称</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat='property in mExistProperties'>
						<td>{{ property.FrontendName }}</td>
						<td>{{ property.BackendName }}</td>
						<td>
							<a href="javascript:;" ng-click="removeProperty($index)">移除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">未添加SKU属性</div>

			<table class="table table-striped text-center">
				<thead>
					<tr>
						<th class="text-center">前台名称</th>
						<th class="text-center">后台名称</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat='property in mLeftProperties'>
						<td>{{ property.FrontendName }}</td>
						<td>{{ property.BackendName }}</td>
						<td>
							<a href="javascript:;" ng-click="addProperty($index)">添加</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</script>

<script type="text/ng-template" id="serviceItemSKUListModal">
	<div class="modal-header">
		<button type="button" class="close" ng-click="close();">&times;</button>
		<h4 class="modal-title">服务项 [ {{ mServiceItemName }} ] SKU列表 </h4>
	</div>
	<div class="modal-body">
		<div class="panel panel-default">
			<table class="table table-striped text-center sku-list">
				<thead>
					<tr>
						<th class="text-center">可选值集合</th>
						<th class="text-center" width="180px">价格（元）</th>
						<th class="text-center" width="150px">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat='sku in mServiceItemSKUList'>
						<td>{{ sku.SKUPropertyValueNames }}</td>
						<td>
							<div ng-if="!sku.editPrice">
								<span>{{ sku.UnitPrice | currency : '' }}</span>
							</div>
							<div class="input-group" ng-if="sku.editPrice">
								<input type="text" class="form-control input-sm" ng-model="sku.UnitPrice" />
								<span class="input-group-btn">
									<button class="btn btn-info btn-sm" type="button" ng-click="saveSKUPrice(sku)">保存</button>
									<button class="btn btn-default btn-sm" type="button" ng-click="sku.editPrice = false">取消</button>
								</span>
							</div>
						</td>
						<td>
							<a href="javascript:;" ng-click="sku.editPrice = true">修改价格</a>
							&nbsp;&nbsp;
							<a href="javascript:;" ng-click="removeSKU($index)">移除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="panel-footer text-center">
				<button class="btn btn-info" ng-click="regenerateSKU()">重新生成</button>
			</div>
		</div>
	</div>
</script>

@section scripts {
	<script type="text/javascript">
		$(document).ready(function () {
			set_left_nav('#ln_ServiceItemList');
		});

		angular.module('dpet').controller('ServiceItemListController', function ($scope, $modal, $http) {
			$scope.showSKUPropertyList = function (itemId, itemName) {
				$http.post('/Ajax/ServiceItemSKUPropertoes',
				{
					'serviceItemId': itemId
				})
				.success(function (data) {
					var modalInstance = $modal.open({
						templateUrl: 'serviceItemPropertyListModal',
						controller: ServiceItemPropertyListModalController,
						resolve: {
							serviceItemId: function () {
								return itemId;
							},
							serviceItemName: function () {
								return itemName;
							},
							existProperties: function () {
								return data.ExistProperties;
							},
							leftProperties: function () {
								return data.LeftProperties;
							}
						}
					});
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			}

			$scope.showSKUList = function (itemId, itemName) {
				$http.post('/Ajax/ServiceItemSKUList',
				{
					'serviceItemId': itemId
				})
				.success(function (data) {
					var modalInstance = $modal.open({
						templateUrl: 'serviceItemSKUListModal',
						controller: ServiceItemSKUListModalController,
						size: 'lg',
						resolve: {
							serviceItemId: function () {
								return itemId;
							},
							serviceItemName: function () {
								return itemName;
							},
							serviceItemSKUList: function () {
								return data;
							}
						}
					});
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			}
		});

		var ServiceItemPropertyListModalController = function ($scope, $http, $modalInstance, serviceItemId, serviceItemName, existProperties, leftProperties) {
			$scope.mServiceItemId = serviceItemId;
			$scope.mServiceItemName = serviceItemName;
			$scope.mExistProperties = existProperties;
			$scope.mLeftProperties = leftProperties;

			$scope.close = function () {
				$modalInstance.dismiss();
			};

			$scope.addProperty = function (index) {
				var property = $scope.mLeftProperties[index];

				if (!confirm("确定将SKU属性 [ " + property.BackendName + " ] 添加至服务项?"))
					return false;

				$http.post('/Service/AddSKUPropertyToServiceItem',
				{
					'serviceItemId': $scope.mServiceItemId,
					'propertyId': property.Id
				})
				.success(function (data) {
					alert(data.Message);

					if (data.Success) {
						$scope.mExistProperties.push(property);
						$scope.mLeftProperties.splice(index, 1);
					}
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			}

			$scope.removeProperty = function (index) {
				var property = $scope.mExistProperties[index];

				if (!confirm("确定将SKU属性 [ " + property.BackendName + " ] 从服务项移除?"))
					return false;

				$http.post('/Service/RemoveSKUPropertyFromServiceItem',
				{
					'serviceItemId': $scope.mServiceItemId,
					'propertyId': property.Id
				})
				.success(function (data) {
					alert(data.Message);

					if (data.Success) {
						$scope.mLeftProperties.push(property);
						$scope.mExistProperties.splice(index, 1);
					}
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			}
		}

		var ServiceItemSKUListModalController = function ($scope, $http, $modalInstance, serviceItemId, serviceItemName, serviceItemSKUList) {
			$scope.mServiceItemId = serviceItemId;
			$scope.mServiceItemName = serviceItemName;
			$scope.mServiceItemSKUList = serviceItemSKUList;

			$scope.close = function () {
				$modalInstance.dismiss();
			};
			
			$scope.regenerateSKU = function () {
				if (!confirm("确定清空当前SKU并重新生成?"))
					return false;

				$http.post('/Service/RegenerateSKUForServiceItem',
				{
					'serviceItemId': $scope.mServiceItemId
				})
				.success(function (data) {
					alert(data.Message);

					if (data.Success) {
						$http.post('/Ajax/ServiceItemSKUList',
						{
							'serviceItemId': $scope.mServiceItemId
						})
						.success(function (data) {
							$scope.mServiceItemSKUList = data;
						})
						.error(function (result) {
							alert("系统繁忙");
						});
					}
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			};

			$scope.saveSKUPrice = function (sku) {
				$http.post('/Service/UpdateServiceItemSKU',
				{
					'skuDto': sku
				})
				.success(function (data) {
					alert(data.Message);

					sku.editPrice = false;
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			};

			$scope.removeSKU = function (index) {
				if (!confirm("确定将该条SKU移除?"))
					return false;

				$http.post('/Service/RemoveSKUFromServiceItem',
				{
					'serviceItemSKUId': $scope.mServiceItemSKUList[index].Id
				})
				.success(function (data) {
					alert(data.Message);

					if (data.Success) {
						$scope.mServiceItemSKUList.splice(index, 1);
					}
				})
				.error(function (result) {
					alert("系统繁忙");
				});
			};
		}
	</script>
}